<template>
  <div class="svg-container" :style="{ height: 40 * ziDaoNum + 'px' }">
    <!-- left -->
    <div class="left" :style="{ height: 40 * ziDaoNum + 'px' }">
      <div class="xiang">
        <slot />
      </div>
      <div class="zidao-list">
        <div class="zidaoxian" v-for="index in ziDaoNum" :key="index">{{ index }}#子导线</div>
      </div>
    </div>

    <!-- svg -->
    <svg
      :width="lineData.length * 80"
      :height="40 * ziDaoNum"
      class="bg-gray-300 border-b-[1.5px] border-r-[1.5px] border-gray-400">
      <g v-for="wire in zidaoConfigs" :key="wire.id" class="cursor-pointer">
        {{ wire }}
        <rect
          :x="wire.x"
          :y="wire.y + step / 2 - wire.height / 2"
          :width="wire.width"
          :height="wire.height"
          :fill="colors[wire.id]" />
        <text
          :x="wire.x + wire.width / 2"
          :y="wire.y + step / 2"
          :font-size="12"
          font-family="consolas"
          text-anchor="middle"
          dominant-baseline="middle"
          fill="white">
          {{ wire.txt }}
        </text>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const { lineData, wireData, ziDaoNum } = defineProps<{
  lineData: LineDataConfig[]
  wireData: WrieDataInter[]
  ziDaoNum: number
}>()

const left = 0
const step = 40

const colors = ['#27ae60', '#2980b9', '#d35400', '#2c3e50', '#8c7ae6', '#192a56', '#40739e']

const zidaoConfigs = computed(() => {
  return wireData.map((wire) => {
    const { id, startBetId, startBet_left_long, endBet_right_long, betIds, endBet_left_long, ziWire_id } = wire
    const { x } = lineData[startBetId]

    let width = endBet_right_long
    betIds.map((id) => {
      const { x } = lineData[id]
      width += x
    })
    width += endBet_left_long

    const txt = `${wire.id}#导线(${wire.long}m),展放${wire.show}m,剩余${wire.remain}m`

    return {
      id,
      txt,
      x: x + startBet_left_long + left,
      y: step * ziWire_id,
      width,
      height: 32,
    }
  })
})
</script>

<style lang="scss" scoped>
.svg-container {
  @apply grid grid-cols-[100px_1fr] bg-gray-300;
  .left {
    @apply flex  text-[12px] font-[consolas];
    .xiang {
      @apply flex-[0.3] flex justify-center items-center border-r-[1.5px] border-b-[1.5px] border-gray-400;
    }
    .zidao-list {
      @apply flex-[0.7];
      .zidaoxian {
        @apply h-[40px] flex justify-center items-center border-b-[1.5px] border-r-[1.5px] border-gray-400 font-bold font-[consolas] text-[12px];
      }
    }
  }
}
</style>
